<template>
  <div class=" views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">评论信息</div>
      <div class="wlm-form-content">
        <el-form ref="evaluationAddForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" label-position="right">
          <el-form-item label="评论等级" prop="score">
            <el-rate v-model="formFormatData.formData.score" style="margin-top:6px;" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
            </el-rate>
          </el-form-item>
          <el-form-item label="商品名称" prop="goods_id">
            <el-button type="primary" @click="goodsToogle">选择商品</el-button>
            <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
            <el-table :data="goodsData" v-if="goodsData.length" style="width:270px;">
              <el-table-column label="商品ID" prop="goods_id"></el-table-column>
              <el-table-column label="商品名称" prop="goods_name"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="评论来源" prop="source">
            <el-select v-model="formFormatData.formData.source" placeholder="请选择" style="width:200px;">
              <el-option label="微信小程序" value='2' v-if="JSON.stringify($store.getters.power).indexOf('wxapp')>-1 ">
              </el-option>
              <el-option label="H5" value='3' v-if="JSON.stringify($store.getters.power).indexOf('H5')>-1 ">
              </el-option>
              <el-option label="微信公众号" value='4' v-if=" JSON.stringify($store.getters.power).indexOf('wechat')>-1 ">
              </el-option>
              <el-option label="支付宝小程序" value='7' v-if="JSON.stringify($store.getters.power).indexOf('aliapp')>-1 ">
              </el-option>
              <el-option label="百度小程序" value='8' v-if="JSON.stringify($store.getters.power).indexOf('baiduapp')>-1">
              </el-option>
              <el-option label="头条小程序" value='9' v-if="JSON.stringify($store.getters.power).indexOf('toutiaoapp')>-1 ">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评论时间" prop="time">
            <el-date-picker v-model="formFormatData.formData.time" value-format="timestamp" type="datetime">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="是否显示">
            <el-switch :active-value="1" :inactive-value="0" v-model="formFormatData.formData.status"> </el-switch>
          </el-form-item>
          <el-form-item label="评论内容">
            <el-input type="textarea" v-model="formFormatData.formData.content" placeholder="" :rows="5"></el-input>
          </el-form-item>
          <el-form-item label="添加图片"  ref="evaluation">
            <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
            <div class="form-help">最多可上传5张照片</div>
          </el-form-item>
        </el-form>
      </div>

    </div>

    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="formFormatData.formData.time=formFormatData.formData.time/1000;formFormatSubmit({ router: { type: 'replace', path: '/merchandise/evaluationManagement', code: 1 }})" type="primary">保存</el-button>
      <router-link tag="span" to="/merchandise/evaluationManagement">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>

  </div>
</template>

<script>
import ChooseGoods from '@/components/ChooseGoods/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import mixins from '@/mixins/mixins'
import {
  addRemarks
} from '@/api/merchandise'
// import { checkArrhasData } from '@/utils/validate'
export default {
  mixins: [mixins.getters('Form')],
  data() {
    const checkRate = (rule, value, callback) => {
      const { message } = rule
      if (!value) {
        callback(new Error(`${message}~~`))
      } else {
        callback()
      }
    }
    return {
      goodsData: [],
      formFormatData: {
        key: 'evaluationAddForm',
        api: {
          editForm: {
            api: '',
            params: {
              id: ''
            },
            filters: {
              img: {
                bindInit: ['chooseImgConfig', 'chooseBgConfig']
              }
            }
          },
          submitForm: addRemarks
        },
        formData: {
          score: 0,
          source: '',
          content: '',
          goods_id: '',
          status: 1,
          time: new Date().getTime(),
          evaluationImg: []
        },
        rules: {
          score: [{ required: true, message: '请对商品进行评分', trigger: 'blur' }, { validator: checkRate, message: '请对商品进行评分', trigger: 'blur' }],
          source: [{ required: true, message: '请选择评论来源', trigger: 'blur' }],
          goods_id: [{ required: true, message: '请选择商品', trigger: 'blur' }]
        }
      },
      // chooseGoodsConfig: {
      //   type: ['chooseGoods'],
      //   model: 'normal',
      //   unique: true,
      //   disabled: [{
      //     label: 'sale_type',
      //     value: 0,
      //     reverse: true
      //   }, {
      //     label: 'member_exclusive',
      //     value: 1
      //   }, {
      //     label: 'transport_type',
      //     value: 30
      //   }],
      //   initList: []
      // },
       chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        unique: true,
        initList: []
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 5,
          isMore: true,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img',
          validateField: ''
        }
      }
    }
  },
  components: {
    ChooseGoods,
    ChooseFiles
  },
  created() {
  },
  methods: {
    filtersChange(val) {
      this.goodsData = []
      this.goodsData = val.displayData
      this.formFormatData.formData.goods_id = this.goodsData[0].goods_id
    },
    goodsToogle() {
      this.$refs.chooseGoods.toggle()
    }
  }

}
</script>

<style lang='scss' scoped>
.evaluation-add-container {
  background: #ffffff;
  .evaluation-add-form {
    width: 500px;
  }
}
</style>
